<template>
  <view class="u-skeleton" :data-theme="globPrimary">
    <u-navbar title="题库" :is-back="false"></u-navbar>
    <mescroll-body
      ref="mescrollRef"
      :height="mescrollHeight"
      @init="mescrollInit"
      @down="downCallback"
      @up="getExamModuleList"
    >
      <view>
        <view class="exam-directory u-flex u-row-between">
          <view @click="onRoute('/pageUser/exam/record')">
            <view class="u-skeleton-rect">
              <u-image
                width="100rpx"
                height="100rpx"
                src="@/static/images/exam_record.png"
              ></u-image>
            </view>
            <view class="text u-skeleton-rect">考试记录</view>
          </view>
          <view @click="onRoute('/pageUser/exam/collected')">
            <view class="u-skeleton-rect">
              <u-image
                width="100rpx"
                height="100rpx"
                src="@/static/images/exam_topic.png"
              ></u-image>
            </view>
            <view class="text u-skeleton-rect">题目收藏</view>
          </view>
          <view @click="onRoute('/pageUser/exam/wrong')">
            <view class="u-skeleton-rect">
              <u-image
                width="100rpx"
                height="100rpx"
                src="@/static/images/exma_wrongtopic.png"
              ></u-image>
            </view>
            <view class="text u-skeleton-rect">错题本</view>
          </view>
        </view>
        <view class="exam-module" style='margin-top: 100rpx'>
          <!-- 一级导航按钮 -->
          <view class="exam-nav">
            <view class="nav-button" @click="onPrimaryNavClick(2)">专项练习</view>
            <view class="nav-button" @click="onPrimaryNavClick(4)">套卷练习</view>
            <view class="nav-button" @click="onPrimaryNavClick(1)">知识点练习</view>
            <view class="nav-button" @click="onPrimaryNavClick(3)">公开考试</view>
          </view>
        </view>
      </view>
    </mescroll-body>
    <u-skeleton :loading="loading" el-color="#F7F7F7" bg-color="transparent"></u-skeleton>

    <edu-user-coupon></edu-user-coupon>

    <u-tabbar
      :list="tabbarList"
      :active-color="globPrimaryColor"
      inactive-color="#303133"
    ></u-tabbar>
  </view>
</template>

<script>
import { mapGetters } from 'vuex'
import tabbarList from '@/settings/tabbarSetting.js'
import MescrollMixin from '@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js'
export default {
  mixins: [MescrollMixin],
  data() {
    return {
      tabbarList,
      loading: true,
      examModuleList: [
        {
          title: '默认标题',
          cover_url: '',
        },
        {
          title: '默认标题',
          cover_url: '',
        },
        {
          title: '默认标题',
          cover_url: '',
        },
        {
          title: '默认标题',
          cover_url: '',
        },
      ],
    }
  },
  computed: {
    ...mapGetters({
      globPrimary: 'designSetting/getGlobTheme',
      globPrimaryColor: 'designSetting/getGlobThemeColor',
      globNavbarHeight: 'projectSetting/globNavbarHeight',
      globStatusBarHeight: 'projectSetting/globStatusBarHeight',
    }),
    globWindowHeight() {
      return this.$u.sys().windowHeight
    },
    mescrollHeight() {
      let height = this.globWindowHeight - this.globNavbarHeight - this.globStatusBarHeight - 50
      return `${height}px`
    },
  },
  options: { styleIsolation: 'shared' },
  onLoad() {
    // this.getExamModuleList()
  },
  methods: {
    // 一级导航按钮点击事件
    onPrimaryNavClick(type) {
      this.$u.route('/pageFound/exam/index?type='+type)
    },
    // 点击之前判断用户是否登录
    onRoute(url) {
      this.$edu.judgeLogin(() => {
        this.$u.route(url)
      })
    },
    getExamModuleList() {
      this.$edu.api.getExaminationModule({module_id:1}).then((res) => {
        this.examModuleList = res.data
        this.mescroll.endSuccess(1)
        setTimeout(() => {
          this.loading = false
        }, 200)
      })
    },
    onModuleItem(item, type) {
      let router = {
        1: '/pageFound/exam/point/index',
        2: '/pageFound/exam/special/index',
        3: '/pageFound/exam/paper/index',
        4: '/pageFound/exam/rollup/index',
      }
      let query = {
        id: item.id,
        title: item.title,
      }
      if (type == 4) {
        query.title = item.title
      }
      this.$u.route(router[type], query)
    },
  },
}
</script>
<style>
page {
  background: #ffffff;
}
</style>
<style lang="scss" scoped>
.exam-directory {
  display: flex;
  padding: 0 60rpx;
  margin-top: 40rpx;
  .text {
    font-size: 24rpx;
    font-weight: 400;
    color: #303133;
    margin-top: 10rpx;
    text-align: center;
  }
}
.exam-module {
  padding: 0 30rpx 30rpx;
  .module-item {
    margin-top: 40rpx;
    .title {
      font-size: 32rpx;
      font-weight: bold;
      color: #303133;
      margin-bottom: 24rpx;
      max-width: 80%;
    }
  }
}
.nav-button {
  flex: 1;
  text-align: center;
  padding: 20rpx;
  background-color: #fff; /* 按钮的白色背景 */
  color: #48c774; /* 绿色字体颜色 */
  border-radius: 10rpx; /* 圆角 */
  margin: 40rpx 10rpx;
  font-size: 32rpx; /* 字体大小 */
  font-weight: bold; /* 字体加粗 */
  border: 4rpx solid #3a9b5b; /* 边框颜色为更深的绿色 */
  box-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.1); /* 轻微阴影效果 */
  transition: all 0.3s ease; /* 过渡效果 */

  &:hover {
    background-color: #f0f0f0; /* hover时背景颜色变浅灰 */
    transform: translateY(-5rpx); /* hover时的上移效果 */
    box-shadow: 0 6rpx 12rpx rgba(0, 0, 0, 0.2); /* hover时阴影增强 */
    border-color: #33874e; /* hover时边框颜色加深 */
  }
}


</style>
